<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>芝麻分数</span>
      <div class="button-container">
        <el-button
          v-for="(button, index) in buttons"
          :key="index"
          :style="buttonStyle(index)"
          @click="handleButtonClick(index)"
        >
          {{ button }}
        </el-button>
      </div>
    </div>

    <div v-if="dataList.length > 0">
      <ul>
        <li v-for="(item, index) in dataList" :key="index" class="data-item">
          <div class="data-info">
            <span class="data-name">{{ item.name }}：</span>
            <span class="data-number">{{ item.number || 0 }}</span>
          </div>
          <el-progress :percentage="calculatePercentage(item)" class="progress-bar"></el-progress>
        </li>
      </ul>
    </div>
  </el-card>

  <template>
  <div class="col-sm-6">
    <div class="ibox">
      <div class="ibox-content">
        <h5>API推送成功</h5>
        <div class="row">
          <div class="col-sm-12">
            <ul class="stat-list" id="api_push_list">
              <li v-for="(item, index) in apiPushList" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">
            <div class="btn-group">
              <button type="button" class="btn btn-xs btn-white" @click="apiPush(0)">今天</button>
              <button type="button" class="btn btn-xs btn-white" @click="apiPush(1)">昨天</button>
              <button type="button" class="btn btn-xs btn-white" @click="apiPush(2)">前天</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.box-card {
  width: 300px; /* 减小卡片的宽度 */
  margin-left: 20px; /* 左对齐卡片 */
}

.data-name {
  font-weight: bold;
  margin-right: 20px; 
}

.data-number {
  color: #007bff;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.data-item {
  margin-bottom: 20px; /* 增加数据项之间的间距 */
  font-size: 16px;
  color: #333;
}

.data-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 增加数据名称和数据数值之间的间距 */
}

.data-name {
  font-weight: bold;
  margin-right: 10px;
}

.data-number {
  color: #007bff;
}

.progress-bar {
  width: 100px;
}

.selected-button {
  background-color: #007bff;
  color: #fff;
}

.button-item {
  /* 添加按钮的样式，可以根据需要进行自定义 */
  padding: 3px 0;
  font-size: 14px;
  cursor: pointer;
}
</style>

<script>
import { listZhiMa } from "@/api/index/index";
export default {
  data() {
    return {
      buttons: ['今天', '昨天', '近三天', '近五天'],
      selectedIndex: 0,
      dataList: [], // 用于存储接口返回的数据
    };
  },
  methods: {
    handleButtonClick(index) {
      this.selectedIndex = index;
      this.handleType(index);
    },
    handleType(type) {
      listZhiMa(type)
        .then((response) => {
          if (response.data && response.data.dataList) {
            this.dataList = response.data.dataList;
          }
        })
        .catch((error) => {
          console.error('请求失败', error);
        });
    },
    calculatePercentage(item) {
      const total = this.dataList.find((data) => data.name === '全国').number;
      if (total === 0) {
        return 0;
      }
      return (item.number / total) * 100;
    },
    buttonStyle(index) {
      // 根据 selectedIndex 动态设置按钮的样式
      return {
        backgroundColor: this.selectedIndex === index ? '#007bff' : 'transparent',
        color: this.selectedIndex === index ? '#fff' : '#000',
        // 其他按钮样式
        padding: '3px 0',
        fontSize: '14px',
        cursor: 'pointer',
      };
    },
  },
  mounted() {
    this.handleButtonClick(0);
  },
};
</script>